<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商城</title>
    <link href="css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/aui.css"/>
    <link rel="stylesheet" href="css/shop.css">
    <link rel="stylesheet" href="css/alert.css">
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/mui.min.js"></script>
    <script>
        autoload=function(){
            var data={};
            data.user_id=user_id;
            data.userpwd=userpwd;
            if(user_id==""){
                return;
            }
            $.ajax({
                type: "POST",
                //url: "http://test/jsonp.php",
                data: data,
                url: "http://xjh.taoleyizhan.com/wap/index.php?ctl=mainpage&show_prog=1",
                dataType: "json",
                success: function (json) {
                    console.log(json)
                    page_data=json
                    var noticeList="";

                    for(var i=0;i<page_data.newest_lottery_list.length;i++){
                        noticeList+='<li class="ellipsis"><img src="images/jiangpin.png" alt="">恭喜'+page_data.newest_lottery_list[i].user_name+'获得'+page_data.newest_lottery_list[i].name+' </li>';
                    }
                    $("#lunbo1").html(noticeList)
                    $("#page_title").text(page_data.page_title)
                    $("#user_tx").attr("src",hostUrl+ page_data.user_logo);
                    $("#user_name").html(page_data.user_name);
                    $("#user_id").html(user_id);
                    $("#user_id").html("ID:"+page_data.id+"")
                    $("#jifen").html(page_data.user_money_int);
                    $("#jiushui").html(page_data.user_score)
                    InitChat();
                },
                error:function(json){
                    console.log(json);
                }
            });
        }
    </script>
    <script src="js/init.js"></script>
    <style>
        @media screen and (max-width:320px){
            .shop_con{height:51vh;}
        }
        @media screen and (min-width:376px) and (max-width:414px){
            .shop_con{height:61vh;}
        }

    </style>

</head>
<body>
    <header class="mui-bar mui-bar-nav ">
        <a href="index.html" class="mui-icon-undo mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title" id="page_title">{$data.page_title}</h1>
    </header>
    <footer class="mui-bar mui-bar-footer mui-row mui-text-center" style="background:#fff;height:50px;">
        <div class="mui-col-sm-3 mui-col-xs-3"><a href="shop.html"><img src="images/foot_shop.png" alt="" height="100%"></a></div>
        <div class="mui-col-sm-6 mui-col-xs-6 lignt_icon"><a href="index.html"><img src="images/foot_index.png" alt="" height="100%"></a></div>
        <div class="mui-col-sm-3 mui-col-xs-3 re"><a href="chat.html"><img src="images/foot_chat.png" alt="" height="100%"><span class="info ab f10">1</span></a></div>
    </footer>

    <div class="mui-content">
        <div class="re">
            <div class="ab" style="z-index:2;"><img id="user_tx" class="user_tx aui-mar-l-5" style="margin-top:-5px;width:50px;height:50px;" src="image/avatar.png" alt=""><img class="ab" style="right:0;bottom:5px;" src="image/sex1.png" alt="" width="12"></div>
            <div class="user aui-mar-t-10 f12 aui-col-10 hidden re" style="height:50px;line-height:1.6;">
                <div class="re" style="width:55%;">
                    <div class="user_bg ab" style="left:-10%;"></div>
                    <div class="ab aui-pad-t-5 aui-col-9 hidden" style="padding-left:70px;">
                        <div id="user_name" class="nowrap">小思设计2017小思</div>
                        <div id="user_id" class="nowrap" style="font-size:10px;">ID:123456</div>
                    </div>
                </div>
                <div class="user_jf ab" style="width:45%;">
                    <div class="user_bg ab" style="right:-10%;height:35px;"></div>
                    <a href="pay.html"><img class="ab" style="right:0;z-index:1;" src="images/rmb.png" alt="" width="35"></a>
                    <div class="ab aui-col-8 flex" style="padding:7px 0 0 10px;">
                        <div class="aui-col-5 flex hidden"><img class="vmid" src="images/xing.png" alt="" width="20"><span id="jiushui"></span></div>
                        <div class="aui-col-4 flex hidden aui-pad-l-5"><img class="vmid" src="images/zuan.png" alt="" width="18"><span id="jifen"></span></div>
                    </div>
                </div>
            </div>
        </div>
        <!--user信息-->

        <div class="aui-pad-10">
            <div class="nav_sm flex mui-text-center f12">
                <div class="f1"><a href="uc_setting.html" class="aui-color-black"><img class="block aui-col-6 auto" src="images/index_set.png" alt="" width="40">设置</a></div>
                <div class="f1"><a href="backpack.html" class="aui-color-black"><img class="block aui-col-6 auto" src="images/index_pack.png" alt="" width="40">背包</a></div>
                <div class="f1"></div>
                <div class="f1"></div>
                <div class="f1"></div>
                <div class="f1"></div>
                <div class="f1"></div>
            </div>
            <div class="flex aui-pad-10 f14 aui-border-radius" style="background:#fee630;box-shadow:3px 3px 3px #dab91e;">
                <div class="f1"><img class="vmid border-r-1 aui-pad-r-10" src="images/jiebao.png" alt="" height="30"></div>
                <div class="f5 border-r-1 hidden">
                    <div id="lunbo" style="width:95%;height:30px;overflow: hidden;color:#d80000;float:left;">
                        <a class="block aui-color-red" href="zhongjiang.html">
                            <ul id="lunbo1">
                                <li class="ellipsis"><img src="images/jiangpin.png" alt="">恭喜司马懿 在独闯江湖游戏中斩获冠军，获得一部iPhone7plus。</li>
                                <li class="ellipsis"><img src="images/jiangpin.png" alt="">恭喜司马懿 在独闯江湖游戏中斩获冠军，获得一部iPhone7plus。</li>
                                <li class="ellipsis"><img src="images/jiangpin.png" alt="">恭喜司马懿 在独闯江湖游戏中斩获冠军，获得一部iPhone7plus。</li>
                            </ul>
                            <ul id="lunbo2"></ul></a>
                    </div>
                </div>
                <div class="f1 mui-text-right f12" style="line-height:30px;">更多</div>
            </div>
            <!--江湖捷报-->
            <!--<div class="aui-mar-t-10"><img class="aui-col-10" src="images/page_baozang.png" alt=""></div>-->

            <div class="aui-col-10 mui-text-center fix" style="left:0;bottom:50px;">
                <ul class="shop_nav select ab mui-text-center aui-col-10 flex">
                    <li class="action">商品</li>
                    <li class="">礼物</li>
                </ul>
                <div class="shop_con back_scroll_bg f14 h58">
                    <ul class="list_box">
                        <li><a href="pay.html">
                            <img class="aui-col-10 block" src="images/shop_tb.png" alt="" >
                            <div class="list_con aui-pad-5 aui-color-red"><img src="images/xing.png" alt="" width="14">充值</div></a>
                        </li>
                        <li class="ruquan" onclick="buy(10,'第一关入场券','')">
                            <img class="aui-col-10 block" src="images/shop_1g.png" alt="" >
                            <div class="list_con aui-pad-5 aui-color-red"><img src="images/zuan.png" alt="" width="14">10</div>
                        </li>
                    </ul>
                    <ul class="list_box" style="display:none !important;">
                        <li>
                            <img class="aui-col-10 block" src="images/shop.png" alt="" >
                            <div class="list_con aui-pad-5 f16 aui-color-red"><img src="images/zuan.png" alt="" width="14">3888</div>
                        </li>
                    </ul>

                </div>
            </div>
        </div>
    </div>

    <!--弹窗开始-->
    <div class="alert none">
        <!--<div class="box mui-text-center re f12 none">-->
            <!--<img class="user_tx ab aui-border-rasius-y" src="image/avatar.png" alt="" width="80" height="80">-->
            <!--<div class="mui-text-left aui-col-4 ellipsis" >期数:201801017896</div>-->
            <!--<div class="f14 aui-mar-t-20"><b>Mac book pro 8G 固态硬盘256G</b></div>-->
            <!--<div class="mui-row aui-mar-t-5 hidden" style="height:40px;">-->
                <!--<div class="mui-col-sm-3 mui-col-xs-3 hidden">-->
                    <!--<div>商品总价</div>-->
                    <!--<div class="aui-color-red">8888积分</div>-->
                <!--</div>-->
                <!--<div class="mui-col-sm-3 mui-col-xs-3 hidden">-->
                    <!--<div>商品总价</div>-->
                    <!--<div class="aui-color-red">8888积分</div>-->
                <!--</div>-->
                <!--<div class="mui-col-sm-6 mui-col-xs-6 hidden">-->
                    <!--有效产品名称：笔记型电脑3C规格型号：A1708：20.3V 3.0A 最大 （电源适配器：A1718，电线组件可选）-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="aui-mar-t-10 mui-text-left">-->
                <!--<div class="">选择倍数</div>-->
                <!--<div class="beishu mui-text-center"><button style="margin-left:0;">1</button><button style="margin-left:0;">10</button><button style="margin-left:0;">200</button><input style="width:30%;height:auto;padding:5px 12px;font-size:12px;text-align:center;" type="text" placeholder="自定义"> </div>-->
                <!--<div class="">当前进度</div>-->
                <!--<div class="aui-border-1 aui-background-white"><span class="aui-background-red block" style="height:4px;width:28%;"></span></div>-->
            <!--</div>-->
            <!--<div class="aui-pad-t-10"><img class="aui-col-4 aui-mar-r-15" src="images/tc_quxiao.png" alt=""><img class="aui-col-4" src="images/tc_queding.png" alt=""></div>-->
        <!--</div>-->
        <!--每日夺宝弹窗-->

        <div class="shop box mui-text-center re f14 none">
            <img class="user_tx ab aui-border-rasius-y" src="image/jiu_t.png" alt="" width="80" height="80">
            <div class=""><b id="buy_0">加载中</b></div>
            <div id="tdes" class="hidden aui-mar-b-5">当前您选择充值的金额为：</div>
            <div id="mdes"></div>
            <div class="mui-numbox aui-mar-t-10" data-numbox-step='1' data-numbox-min='1' data-numbox-max='10'>
                <!-- "-"按钮，点击可减小当前数值 -->
                <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                <input class="mui-numbox-input" type="number" id="buy_num" />
                <!-- "+"按钮，点击可增大当前数值 -->
                <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
            </div>
            <div class="aui-pad-10 mui-text-left hidden" id="buy_1">加载中</div>
            <div class="aui-pad-t-15 flex" style="justify-content:space-around;">
                <div class="cancel gray_btn" style="width:40%;">取消</div>
                <div id="buy_btn" class="queding orange_btn" style="width:40%;"><a class="aui-color-black" href="javascript:void(0);">确定</a></div>
            </div>
        </div>
        
        <div class="tijiao box mui-text-center re f12 none">
            <div class="tc_btn f14">提交成功</div>
            <div>恭喜你，你购买成功！</div>
            <div>去 <span class="aui-color-red"><a class="aui-color-red" href="backpack.html">我的背包</a></span>查看你的购买结果</div>
            <a href=""><img class="aui-col-4 aui-mar-t-10" src="images/tc_queding.png" alt=""></a>
        </div>

        <div class="user_info box f14 mui-text-center re none">
            <img class="user_tx ab aui-border-rasius-y" src="image/avatar.png" alt="" width="80" height="80">
            <div style="overflow:hidden;">
                <div class="aui-pad-b-5"><img class="aui-mar-r-10" src="image/sex1.png" alt="" width="14"><b>司马懿</b> <span class="f12">ID:999</span></div>
                <div class="mui-row aui-pad-10 line-height-2 mui-text-left">
                    <div class="mui-col-sm-7 mui-col-xs-7">
                        <div>段位：绿蓝带</div>
                        <div>胜率：77%</div>
                    </div>
                    <div class="mui-col-sm-5 mui-col-xs-5">
                        <div>幸运：99999</div>
                        <div>人气：9999</div>
                    </div>
                </div>
                <div class="yes orange_btn auto">确定</div>
            </div>
        </div>
        <!--用户信息-->
    </div>

    <input type="hidden" id="buy_money" value=0>
    <script>
        //获得slider插件对象
        var gallery = mui('.mui-slider');
        gallery.slider({
            interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
        });
        function buy(str0,str1,str2){
            $("#buy_0").html(str1);
            $("#buy_1").html(str2);
            $("#buy_num").val(1);
            $("#buy_money").val(str0);
            if(str0*1==10){
                $("#tdes").text("当前您需要消耗的积分值为：");
                var moneyText=$("#buy_num").val()*$("#buy_money").val()+"积分";
            }else{
                $("#tdes").text("当前您选择充值的金额为：");
                var moneyText=$("#buy_num").val()*$("#buy_money").val()+"￥";
            }


            $("#mdes").text(moneyText);
            $(".mui-numbox-btn-plus,.mui-numbox-btn-minus").click(function(){
                if(str0*1==10){
                    var moneyText=$("#buy_num").val()*$("#buy_money").val()+"积分";
                    $("#mdes").text(moneyText);
                }else{
                    var moneyText=$("#buy_num").val()*$("#buy_money").val()+"￥";
                    $("#mdes").text(moneyText);
                }

            })
        }

        document.querySelector('#buy_btn').addEventListener('click',function () {
            var buy_money=$("#buy_money").val();
            var buy_num=$("#buy_num").val();
            if(buy_money==10 || buy_money==200){
                var sendData={};
                sendData.user_id=user_id;
                sendData.buy_money=buy_money;
                sendData.buy_num=buy_num;
                $.ajax({
                    url: hostUrl+'wap/index.php?ctl=deal&act=goumaircq',
                    type: 'POST',
                    data: sendData,
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        if(data.status=="1"){
                            alert(data.info);
                            location.href="backpack.html";

                        }else{
                            alert(data.info);
                        }
                    },
                    error: function () {
                        //alert("系统错误，请联系管理员");
                    }
                });
            }else{
                location.href="pay.html?money="+buy_num*buy_money;
            }
        })
    </script>

</body>
<script src="js/jiebao.js"></script>
<script src="js/alert.js"></script>

</html>